<style type="text/css">
	.container {
		background-color: #f8f1f1;
		display: flex;
		width: 30rem;
		height: 30rem;
		position: relative;
		margin: 10rem auto 0 auto;
	}
	.description {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 30%;
		left: 40%;
		color: #7d7979;
	}
</style>
<div class="container">
	<div class="description">
		<h1>404</h1>
		<h2>好像走丢了</h2>
		<span>the page is lost</span>
	</div>
	<canvas id="canvas"></canvas>
</div>
<script type="text/javascript">
	var W = 650, H = 474, ctx, angle = 0, len = 20, count = 50;           
	var canvas =document.getElementById("canvas");           
	ctx = canvas.getContext('2d');           
	            
	ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)';           
	var run = setInterval(draw, 100);    
	 
	function draw() {              
	    //清除上一帧
	    ctx.clearRect(0, 0, W, H);
	    //重新绘制              
	    xiayus();           
	}          
	 
	function xiayu(x, y, r) {               
	    ctx.beginPath();               
	    ctx.moveTo(x, y);               
	     
	    ctx.lineTo(x + angle, y + len);               
	    ctx.lineWidth = 2;               
	    ctx.stroke();           
	}           
	function xiayus() {               
	    for (var i = 1; i <= count; i++) {                   
	        xiayu(Math.random() * W, Math.random() * H, angle);               
	    }           
	}        
</script>